<template>
	<view>
		<nav-bar :title="$t('提現')" leftIcon="left"></nav-bar> <!--  :rightText="$t('流轉記錄')" -->
		<view class="contentMain">
			<!-- <image src="../../assets/myCirculation/bjImg.png" class="img"></image> -->
			<view class="imgText">
				<view class="iconText">
					<image src="../../assets/orderDetail/cfp.png" class="icon"></image>
					<view class="moneyName">
						USDT
					</view>
				</view>
				<view class="moneyTypeName">
					{{ $t('鏈類型') }}
				</view>
				<view class="typeList">
					<view :class="index == key ? 'moneyNameKk' : 'moneyNameKk2'" v-for="(item, key) in typeList"
						:key="key" @click="handleType(item.typeName, key)">
						{{ item.typeName }}
					</view>
				</view>
			</view>

			<view class="contentList">
				<view class="inputMain">
					<view class="inputName">
						USDT{{ $t('地址') }}
					</view>
					<view class="inpIconFlex">
						<input class="inp" v-model="formData.usdtAddress" :placeholder="$t('請你掃碼抑或輸入USDT地址')">
						<!-- #ifdef APP-PLUS -->
						<image @click="scan" src="../../assets/myCirculation/sm.png" class="inpIcon" id="reader">
						</image>
						<!-- #endif -->
					</view>
				</view>
			</view>
			<view class="contentList">
				<view class="inputMain">
					<view class="inputName">
						{{ $t('數量') }}
					</view>
					<view class="inpIconFlex">
						<input class="inp" v-model="formData.amount" :placeholder="$t('請您輸入USDT數量')" type="digit"
							@blur="cli">
						<view class="num" @click="all">
							{{ $t('全部') }}
						</view>
					</view>
				</view>
			</view>
			<!-- 			<view class="contentList">
				<view class="inputMain">
					<view class="inputName">
						{{$t('備注')}}
					</view>
					<view class="inpIconFlex">
						<input class="inp" v-model="formData.note" :placeholder="$t('請您輸入備注')">
					</view>
				</view>
			</view> -->
			<!-- <view class="contentList">
				<view class="inputMain">
					<view class="inputName">
						{{$t('手續費')}}
					</view>
					<view class="inpIconFlex">
						<input class="inp" v-model="formData.flowRate" :placeholder="$t('請你輸入CFP數量')">
						<view style="color: #FFFFFF;" class="num">
							CFP
						</view>
					</view>
				</view>
			</view> -->
			<view class="sText">{{ $t('提現USDT需要大於100個，手續費收取2USDT') }}</view>
			<view class="sText">{{ $t('提現到賬時間爲1個工作日內') }}</view>
			<view class="btn" @click="notarize">
				{{ $t('確認') }}
			</view>
		</view>
		<uni-popup ref="inputDialog" type="dialog" v-if="!typePass">
			<uni-popup-dialog ref="inputClose" mode="input" :title="$t('輸入您的交易密碼')" :placeholder="$t('請輸入')"
			  @confirm="dialogInputConfirm" :value="valueText" :cancelText="$t('取消')"
			  :confirmText="$t('確認')"></uni-popup-dialog>
		  </uni-popup>
		  <uni-popup ref="inputDialog" type="dialog" v-if="typePass"> 
			<uni-popup-dialog ref="inputClose" mode="input" :title="$t('輸入您的谷歌密鑰')" :placeholder="$t('請輸入')"
			  @confirm="dialogInputConfirm" :value="valueText" :cancelText="$t('取消')"
			  :confirmText="$t('確認')"></uni-popup-dialog>
		  </uni-popup>
	</view>
</template>

<script setup>
	// import qrcode from "@/utils/reqrcode.js";
	// import { BrowserQRCodeReader } from '@zxing/library';
	import {
		ref,
		watch
	} from "vue";
	import {
		onShow
	} from "@dcloudio/uni-app"
	import apiFn from '@/hooks/myCirculation.js'
	import {
		ScanCode
	} from '@/utils/check.js'
	import i18n from '@/locale/index'
	const {
		addUserAroundFlow,
		getMyFlowMoney
	} = apiFn()
	const MyFlowMoney = ref({})
	const userInfo = ref({})
	const formData = ref({
		userId: '', //用户UserId
		usdtAddress: '', //被转账人CFP地址
		amount: '',
		usdtAddressType: 'TRC20',
		payPassword: ''
		// note: '',
	})
	const typePass = ref(false)
	const inputDialog = ref()
	const valueText = ref('')
	const index = ref(0)
	let state = ref(false)
	const bool = ref(false)
	// async function getuserinfo() {
	// 	const res = await uni.getStorage({
	// 		key: 'setUserInfo'
	// 	})
	// 	userInfo.value = res.data
	// 	formData.value.userId = userInfo.value.userId
	// }
	const typeList = ref([{
			index: 0,
			typeName: 'TRC20'
		},
		// {
		// 	index: 1,
		// 	typeName: 'ERC20'
		// },
	])
	const typeName = ref('TRC20')

	const handleType = (e, a) => {

		index.value = a
		formData.value.usdtAddressType = e
	}
	const getuserinfo = async () => {
		const res = await uni.getStorage({
			key: 'setUserInfo'
		})
		userInfo.value = res.data
		formData.value.userId = userInfo.value.userId
	}
	getuserinfo()

	// //手续费比例有可能调接口，现在还没确定
	// watch(() => formData.value.amountFlow, (n) => {
	// 	let a = 1
	// 	if (formData.value.flowRate) {
	// 		formData.value.flowRate = 0
	// 	}
	// 	formData.value.flowRate = (n+formData.value.flowRate)*0.05
	// })
	onShow(async () => {
		let list = {
			userId: uni.getStorageSync('setUserInfo').userId
		}
		let moneyAmoutData = await getMyFlowMoney('usdtInfo/getUsdtBalance', list)
		MyFlowMoney.value = moneyAmoutData

		getuserinfo()
		userInfos()
	})
	const userInfos = async()=>{
		let list = {
			userId: uni.getStorageSync('setUserInfo').userId
		}
		let data = await getMyFlowMoney('user/personalInfo', list)
		typePass.value = data.googleVerificationSwitch
	}
	//全部按钮
	function all() {
		formData.value.flowRate = 0
		formData.value.amount = MyFlowMoney.value.usdtAmount
	}

	function cli(e) {
		if (!e.detail.value) {
			uni.showToast({ title: `${i18n.global.t('數量不能為空')}!`, icon: 'none', })
			return formData.value.amount = 100
		}

		if (e.detail.value < 100) {
			uni.showToast({ title: `${i18n.global.t('數量不能小於一百')}!`, icon: 'none', })
			return formData.value.amount = 100
		}
		const a = +e.detail.value
		formData.value.amount = a.toFixed(2)
	}
	//确认体现
	const dialogInputConfirm = async (value) => {
		formData.value.payPassword = value
		let actionMoney = await getMyFlowMoney('usdt/getWithdrawal', formData.value)
		uni.showToast({
			title: `${i18n.global.t('提現已提交，正在審覈中')}!`,
			icon: 'none',
		})
		uni.switchTab({
			url: '/pages/my/my',
			success() {
				let page = getCurrentPages().pop(); //跳转页面成功之后
				if (!page) return;
				page.onShow(); //如果页面存在，则重新刷新页面
			}
		})
	}
	let getStorage = async() =>{
	    //这是一个异步接口
	    await uni.getStorage({
	      key:'googleVerificationSwitch',//本地缓存中的指定的 key
	      success(res) {//接口调用的回调函数，res = {data: key对应的内容}
	        typePass.value = res.data
	      }
	    })
	  }
	//确认按钮
	async function notarize() {
		
		if (!formData.value.usdtAddress || !formData.value.amount) {
			return uni.showToast({
				title: `${i18n.global.t('請完善信息')}!`,
				icon: 'none',
			})
		}
		if (formData.value.amount < 100) return uni.showToast({
			title: `${i18n.global.t('數量不能小於一百')}!`,
			icon: 'none',
		})
		if (!uni.getStorageSync('setUserInfo').payPasswordStatus) {
			uni.navigateTo({
				url: '/pages/transactionPassword/transactionPassword'
			})
			uni.showToast({
				title: `${i18n.global.t('請先設置交易密碼')}!`,
				icon: 'none'
			})
			return
		}
		inputDialog.value.open()
		// uni.showModal({
		// 	title: i18n.global.t('提示'),
		// 	content: i18n.global.t('您確定流轉給')+ ':' + formData.value.urlCFP + '?',
		// 	cancelText: i18n.global.t('取消'), // 取消按钮的文字  
		// 	confirmText: i18n.global.t('確定'), // 确认按钮的文字
		// 	success: async function(res) {
		// 		if (res.confirm) {
		// 			if(state.value == false){
		// 				state.value = true
		// 				await addUserAroundFlow('userAroundFlow/addUserAroundFlow', formData.value)
		// 				uni.showToast({
		// 					title: `${i18n.global.t('流轉完成')}`,
		// 					icon: 'none',
		// 				})
		// 				uni.switchTab({
		// 					url: '/pages/my/my',
		// 					success(){
		// 						let page = getCurrentPages().pop();  //跳转页面成功之后
		// 							if (!page) return;  
		// 							page.onShow(); //如果页面存在，则重新刷新页面
		// 					}
		// 				})
		// 				setTimeout(()=>{
		// 					state.value = false
		// 				},3000)
		// 			}
		// 		} else {
		// 			// 执行取消后的操作
		// 			uni.showToast({
		// 				title: i18n.global.t('取消成功'),
		// 				icon: 'none',
		// 				duration: 2000
		// 			})
		// 		}
		// 	}
		// })
	}
	//#ifdef APP-PLUS
	//扫码
	async function scan() {
		const res = await ScanCode()
		formData.value.urlCFP = res
	}
	//#endif
	//   //#ifdef H5
	//   function scanCodeH5() {
	// uni.chooseImage({
	//       sizeType: ["original"],
	//       count: 1,
	//       success: function (res) {
	//         const tempFilePaths = res.tempFilePaths[0]; // 获取到二维码图片的链接
	//         qrcode.decode(tempFilePaths); // 解析二维码图片
	//         qrcode.callback = async function (res1) {
	//           // 解析失败返回 error decoding QR Code
	//           if (res1 == "error decoding QR Code") {
	//             uni.showToast({
	//               title: "二维码解析失败",
	//               duration: 2000,
	//               icon: "none",
	//             });
	//           } else {
	// 		alert('1111',res1)
	//             //扫码成功 res1就是扫描二维码的结果在这里写扫码成功的逻辑
	//           }
	//         };
	//       },
	//     });
	//   }
	//   //#endif
</script>

<style scoped>
	.moneyNameKk2 {
		width: 180rpx;
		height: 60rpx;
		background: #b3b3b3;
		border-radius: 10rpx;
		text-align: center;
		line-height: 60rpx;
		margin-right: 25rpx;
	}

	.moneyNameKk {
		width: 180rpx;
		height: 60rpx;
		background: linear-gradient(90deg, #039BDA, #0DF2ED);
		border-radius: 10rpx;
		text-align: center;
		line-height: 60rpx;
		margin-right: 25rpx;
	}

	.typeList {
		display: flex;
		align-items: center;
	}

	.sText {
		font-size: 22rpx;
		text-align: center;
		margin: 0 auto;
		color: #848686;
		line-height: 50rpx;
	}

	.btn {
		width: 640rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #039BDA, #12FFFA);
		border-radius: 50rpx;
		margin: 0 auto;
		text-align: center;
		line-height: 100rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		margin-top: 25rpx;
	}

	.inpIconFlex {
		display: flex;
		align-items: center;
	}

	.num {
		font-size: 28rpx;
		color: #12FFFA;
		position: absolute;
		right: 80rpx;
	}

	.inpIcon {
		display: block;
		width: 28rpx;
		height: 28rpx;
		position: absolute;
		right: 70rpx;
	}

	.inp {
		border: 2rpx solid #636897;
		border-radius: 10rpx;
		padding: 32rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		display: block;
		width: 100%;
		/* border: 0; */
	}

	/* 	.inp:focus  {
		border: 2rpx solid #fff;
		border-radius: 10rpx;
		padding: 32rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		display: block;
		width: 100%;
	} */

	.inputName {
		font-size: 24rpx;
		color: #808492;
		line-height: 80rpx;
	}

	.contentList {
		padding: 25rpx;
	}

	.moneyNameKk {
		width: 180rpx;
		height: 60rpx;
		background: linear-gradient(90deg, #039BDA, #12FFFA);
		border-radius: 10rpx;
		text-align: center;
		line-height: 60rpx;
	}

	.moneyTypeName {
		font-size: 22rpx;
		color: #848686;
		line-height: 50rpx;
	}

	.moneyName {
		font-size: 30rpx;
		margin-left: 15rpx;
		color: #FFFFFF;
	}

	.iconText {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.imgText {
		width: 100%;
		padding: 25rpx;
	}

	.icon {
		width: 60rpx;
		height: 60rpx;
		display: block;
	}

	.contentMain {
		padding: 30rpx;
	}

	.img {
		width: 100%;
		height: 270rpx;
	}
</style>